<template>
	<w-layout showNavbar navTitle="编辑资料" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="public-card-10 px-50 pt-60 pb-10">
					<view class="fc-ac">
						<view @click="chooseImage" class="" style="position: relative;">
							<image style="width: 136rpx;height: 136rpx;border-radius: 50%;" :src="formData.headimg" mode=""></image>
							<image style="width: 144rpx;height: 144rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);" src="/static/icon/public/head-border.png" mode=""></image>
						</view>
						<view class="color mt-30">
							更换
						</view>
					</view>
					
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30 mt-100" style="border-color: var(--gray-line) !important;">
						<view class="op-90 w-15">
							昵称
						</view>
						<view class="flex-1 ml-40">
							<input v-model="formData.nickname" class="w-100 color" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90 w-15">
							ID
						</view>
						<view class="flex-1 ml-40">
							<input v-model="userStore.user_info.ID" disabled class="w-100 op-30" type="text" placeholder="请输入" />
						</view>
					</view>
					
					<view @click="submit" class="public-btn-3 transition px-30 py-25 t-c mt-auto mt-100 mb-80">
						<view class="text-color-b fs-32">
							确认修改
						</view>
					</view>
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import config from '@/common/config'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		update_userinfo
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		formData.headimg = userStore.user_info.headimg
		formData.nickname = userStore.user_info.nickname
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		
	})
	const formData = reactive({
		nickname: '',
		headimg: '',
	})

	async function submit(){
		if(!formData.nickname){
			return uni.$u.toast('请输入昵称')
		}
		if(!formData.headimg){
			return uni.$u.toast('请选择头像')
		}
		const res = await update_userinfo({
			...formData
		})
		uni.$u.toast('修改成功')
		userStore.user_info.headimg = formData.headimg
		userStore.user_info.nickname = formData.nickname
	}
	
	async function chooseImage(){
		uni.chooseImage({
			count: 1, //默认9
			success: async function(res) {
				const filePath = res.tempFiles[0].path;
				console.log(res,'上传res')
				formData.headimg = await upload(filePath)
			},
			fail: function(res) {
				console.log('上传失败');
			},
		})
	}
	async function upload(filePath){
		return new Promise((resolve,reject)=>{
			uni.uploadFile({
			    url: config.baseUrl + '/api/picture', //仅为示例，非真实的接口地址
			    filePath: filePath,
			    name: 'file',
			    formData: {
			        'user': 'test'
			    },
			    success: (uploadFileRes) => {
			        let { data,status,msg } = JSON.parse(uploadFileRes.data)
			        if(status == 1){
						resolve(data.path)
			        }else{
						reject()
					}
			    },
				fail: () => {
					reject()
				}
			});
		})
		
		
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 40rpx;
		
	}
	
</style>